<template>
    <div class="modal fade" id="addRoleModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          	<div class="modal-header">
            	<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            	<h4 class="modal-title" id="myModalLabel">新增/编辑員工</h4>
          	</div>
          	<div class="modal-body">
          	 	<div class="form-horizontal">
	                <div class="form-group">
	                  <label for="" class="col-sm-4 control-label">角色名称<label style="color: red;">*</label>：</label>
	                  <div class="col-sm-8">
	                    <input type="text" class="form-control" v-model="role.roleName" placeholder="请输入角色名称">
	                  </div>
	                </div>
	                <div class="form-group">
	                  <label for="" class="col-sm-4 control-label">角色说明&nbsp;：</label>
	                  <div class="col-sm-8">
	                    <textarea rows="5" class="form-control" v-model="role.remark" placeholder="请输入角色说明"></textarea>
	                  </div>
	                </div>
	                <input type="hidden" class="form-control" v-model="id" placeholder="角色主键">
	                <input type="hidden" class="form-control" v-model="optType" placeholder="当前操作类型">
	              </div>
          	</div>
          	<div class="modal-footer">
            	<!--<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>-->
            	<button type="button" class="btn checkedBtn" v-show="btnShow" @click="saveRole">确定</button>
          	</div>
        </div>
      </div>
    </div>
</template>

<script>
	export default{
		//接收父组件的绑定值
		props: ["roleModal"],
		data() {
			return {
				//机构信息对象
				role: {
					roleName: '',
					roleIndexPage: 1,
					remark: '',
					roleOrigin:'2'
				},
				id:'',
				optType:'',
				btnShow: true
			}
		},
		watch: {
			//监听父组件绑定值是否改变
			roleModal: {
				handler: function(val, oldVal){
					//初始化操作类型optType，控制密码框是否进行展示
					this.optType = this.roleModal.optType;
					//初始化机构ID
					this.id= this.roleModal.roleId;
					this.initRole();
				},
				//深层监听，当位对象时，若设为true，属性变更时即可触发，若为false，属性无法监听到
				deep: true
			}
		},
		methods: {
			//初始化机构信息
			initRole() {
				var _self = this;
				var roleId = this.roleModal.roleId;
				var optType = this.roleModal.optType;
				//存在机构ID,并且为修改操作时,根据ID加载一遍机构数据
				if(roleId && "U" == optType){
					var params = {};
					params["id"] = roleId;
					var body = {};
					body.params = params;
			   		var url = _self.utilHelper.apiUrl + "/api/getRoleById";
			   	 	_self.$http.post(url, body).then((response) => {
							var data = response.body.resData;
				   			var roleData = data.channelRole;
				   			_self.id = roleData.id;
				   			_self.role.roleName = roleData.roleName;
				   			_self.role.remark = roleData.remark;
				  		}, (response) => {
				  	});
				}else{
					_self.id = "";
		   			_self.role.roleName = "";
		   			_self.role.remark = "";
				}
			},
			saveRole() {
				var _self = this;
				var params = _self.role;
				//执行新增或修改
				if(_self.roleValidate()){
					_self.btnShow = false;
					var url = _self.utilHelper.apiUrl + "/api/addChannelRole"
					if("U"==_self.optType){
						params.id = _self.id;
						url = _self.utilHelper.apiUrl + "/api/editChannelRole";
					}
					var body = {};
					body.params = params;
			   	 	_self.$http.post(url, body).then((response) => {
							var data = response.body.resData;
				   			var result = data.result;
				   			var resData = data.resultMsg;
				   			layer.msg(resData, {
								time: 1000
							}, function(){
								//关闭弹出层
								_self.btnShow = true;
								$('#addRoleModal').modal('hide');
								//子组件向父组件传递信号: 调用父组件中对子组件的监听
								_self.$emit('saveRoleListener');
							}); 				
				  		}, (response) => {
				  	});
				}
			},
			roleValidate() {
				var roleName = this.role.roleName;
				if(!roleName){
					layer.msg("角色名称不能为空",{
						time: 2000
					});
					return false;
				}
				return true;
			}
		}
		
	}
	
</script>